
<template>
  <div style="border: 1px solid lightgray;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor :style="{ height }" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange"/>
  </div>
</template>
<script>
import { Boot } from "@wangeditor/editor";
import attachmentModule from "@wangeditor/plugin-upload-attachment";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
Boot.registerModule(attachmentModule);

import {uploadFile} from "@/api/uploadFile";


export default {
  name:'wang-editor',
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: () => "100%",
    },
  },

  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["fullScreen"],
        insertKeys: {
          index: 24,
          keys:[
              "uploadAttachment",//上传附件
              "sub", // 下标
              "sup", // 上标
              "indent", // 增加缩进
              "delIndent", // 减少缩进
              "todo", // 待办
              "redo", // 重做
              "undo", // 撤销
              "tableFullWidth", // 宽度自适应
          ],
        },

      },
      editorConfig: {
        placeholder: "请输入内容...",
        scroll: false,
        MENU_CONF: {
          uploadImage: {
            customUpload: this.uploadImg,
            fieldName: "file",
            meta: {token: localStorage.getItem("token"),},
          },
          uploadVideo: {
            customUpload: this.uploadVideo,
            fieldName: "file",
            meta: {token: localStorage.getItem("token"),},
          },
          uploadAttachment: {
            customUpload: this.uploadFile,
            fieldName: "file",
            meta: {token: localStorage.getItem("token"),},
          },
        },
        hoverbarKeys: {
          attachment: {
            menuKeys: ["downloadAttachment"],
          },
        },
      },
      mode: "default",
    };
  },


  watch: {
    value: {
      handler(val) {
        this.html = val;
      },
      immediate: true,
    },
  },


  mounted() {

  },


  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },


  methods: {


    onChange(editor) {
      console.log(editor)
      this.$emit("input", this.html);
    },


    onCreated(editor) {
      this.editor = Object.seal(editor);
    },


    uploadImg(file, insertFn) {
      uploadFile(file).then(res=>{
        insertFn(res.data.data.link);
      })
    },



    uploadVideo(file, insertFn) {
      uploadFile(file).then(res=>{
        insertFn(res.data.data.link);
      })
    },


    uploadFile(file, insertFn) {
      uploadFile(file).then(res=>{
        insertFn(`附件:${res.data.data.link}`,`下载url`);
      })

    },

  },
};



</script>

<style lang="scss">
.border-line {
  border: 1px solid #d6d6d6;
}
::v-deep .w-e-scroll > div:first-child {
  height: 100%;
  overflow-y: auto;
}

.w-e-text-container{
  min-height: 300px !important;
}
</style>
